En mi aplicación NuxtJS, cuando intento actualizar la URL de la foto de un usuario, aparece el siguiente error:
client.js?06a0:103 Error: [vuex] do not mutate vuex store state outside mutation handlers. at assert (vuex.esm.js?2f62:135) at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:893) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863) at Watcher.run (vue.runtime.esm.js?2b0e:4584) at Watcher.update (vue.runtime.esm.js?2b0e:4558) at Dep.notify (vue.runtime.esm.js?2b0e:730) at Object.reactiveSetter [as photoURL] (vue.runtime.esm.js?2b0e:1055) at updateProfile (index-d81b283a.js?6899:5314)Aquí está el código que está causando el problema:
async updateAvatar() { const auth = getAuth() try { await updateProfile(auth.currentUser, { photoURL: this.imageSrc.secure_url }) await setDoc( doc(db, 'users', this.userProfile.uid), { avatar: { ...this.imageSrc } }, { merge: true } ) console.log('avatar updated!') } catch (error) { console.log(error) } }, Si comento el updateProfile() , funciona bien, pero si lo devuelvo, aparece el error. ¿Qué estoy haciendo mal?
Aparentemente, usando el método Firebase Auth: updateProfile() desencadenó una actualización onAuthStateChanged . Entonces, haciendo esto:
updateProfile(auth.currentUser, { photoURL: this.imageSrc.secure_url })... provocó una actualización de Auth Observer porque se estaban modificando los datos del proveedor (imagen de avatar) y esto hizo que se ejecutara el siguiente código:
onAuthStateChangedAction({ commit, dispatch }, authUser) { const { displayName, email, emailVerified, photoURL, uid } = authUser commit('SET_AUTH_USER', { displayName, email, emailVerified, photoURL, // providerData, // causes vuex mutation error uid }) console.log('set Auth User to store') dispatch('getUserProfile', authUser) }, El culpable fue la propiedad providerData que había modificado algunos datos de referencia que eran diferentes a los que estaba almacenando Vuex, de ahí el error de Vuex.
Además, vi esto :
No guarde el authUser directamente en la tienda, ya que esto guardará una referencia de objeto al estado que Firebase Auth actualiza directamente periódicamente y, por lo tanto, arroja un error vuex si es estricto. = falso.
Por lo tanto, la eliminación de providerData de mi acción onAuthStateChanged solucionó el problema.